Copyright: Copyright ©Xara Ltd 2001-2002
Citation: Webstyle ©Xara Ltd. 2001-2002


100 First tutorial
The basics...

This page tells you about the start-up Webstyle window.

On the left Load and Import let you reload work you have already created. Ignore these for now.

The options on the right let you select different types of template graphic (such as bullets, buttons and so on). Click any of these to see the range of templates available. (Shown on the next page.)

Theme sets are sets of graphics all designed around a common theme. A set might include headings, a divider, bullets, buttons...

Go to the next page


102
Selecting templates

This page tells you how to select templates. We show the page for bullets but (except for Theme Sets) the basic idea is the same.

The next page describes the buttons on the left.

The Templates area shows a page of available templates. You can use the Forward and Back arrows to step between pages. Or you can use the Search Filters to show only templates of interest.

The Preview Window shows the currently selected template. (A default template if you haven't yet selected one.)

Go to the next page


105
Webstyle's Window

This page tells you what we've called the the Webstyle window when editing graphics.

On the left of the window is the Button Strip. You use this to select options for creating stunning graphics for your web pages. Some buttons (such as Text) are dimmed - these are options that don't apply to this graphic. For example a simple bullet like the one shown doesn't have any text.

The Preview Window showing you a preview of your graphic as you create it.

Below the Preview Window you see the options available right now. For example, if you click the Color button on the Button Bar, you see the Color Options.

OK that's covered the basics. Now let's gets to the fun bit of actually creating a graphic.

Start this tutorial


110 Browse
Stepping from page to page

At the top of this tutorial page there are two arrow buttons (<< >>)

Click >> to move on to the next page.

Click << to return to the previous page.

To return to the start of the Tutorial click |<<.


120 Load
Select the basic graphic

The first step in creating any graphic is deciding which type of graphic you want to create. Webstyle presents you with various graphic templates you can choose from.

This tutorial uses a button with text on it. This type of graphic is useful for navigating web pages. (The text might say 'News', 'Up-coming events', 'History'.)

Details on next page...


122
The Start page shows the basic types of graphic you can create.

This stage of the tutorial shows you how to create a button so...

1. Click on "Buttons"

This shows you the range of buttons


124
More about this selecting graphics..

These arrow buttons let you move between the pages showing available graphics.

To show only graphics of interest you can use the use the filters on the left:


126
2. Click on one of the examples

This loads a copy of that button into Webstyle. You're never working on the original button, just a copy. So there's no danger of overwriting the original.

This completes the process of loading a graphic. For this tutorial we've used button but you use the same method to load any type of graphic.


128
What if I want more information about something?

Click the Tell me more button at the top of the window. This gives you background information or hints about using Webstyle.

(Don't click Tell me more right now though - you might close this Tutorial.)


130 Change Color
Change the color

Like everything in Webstyle, changing colors is easy.

Details on next page...


131
1. Click the "Color" button on the button strip

This changes the right hand part of the window to show you the colors used in the graphic.

For simple graphics there's only a background and one color name. More complex graphics show you more color names. Just click on a name to select it.


132
2. Click on a new color for your button

(Click a colored square - choose any color you like.) The button immediately changes color.


133
What if I decide I don't like the color I've just chosen?

Easy. Either choose another color by repeating the previous step. Or, if you prefer the original color, just click Revert. This throws away any changes you've made since you clicked the Color button.


140 Text
Change the text

The next step in this tutorial is to type in the text you want.

Details on next page...


145
1. Click the "Text" button

This displays the text options.

2.	Change the text

Type in what you like. As you type, the button resizes to display your new text.

3. Change the font

Webstyle displays the fonts installed on your computer.

Click on a font you like the look of.


170 Resize
Resizing the graphic

Last stage before saving. You need to specify what size you want the graphic to be on your web page.

Details on next page...


175
1. Click the "Size" button

This shows you the resizing options.

2. Set the size

For a button like this 100 pixels is a good size.

Drag the slider until the Width shows approximately 100.


180 Save
Saving the graphic

This is last step in this first tutorial. It covers saving the graphic to disc.

Details on next page...


182
1. Click the "Save" button

This shows you the save options. For more details of these options click the Tell me more button at the top of the window.

2. Click "GIF" in Output Type

GIF format files are suitable for simple graphics like this. JPEG is best for graphics with complex shading or for photographs.


184
3. Click "Save Graphic"

This moves onto the second set of save options.


186
4. Type in a name for your graphic

We suggest something simple such as Button

You can use letters A-Z a-z or numbers 0-9 or dash (-) or underscore ( _ ) in file names.

Do not use slashes (/ \), commas, periods or spaces. (Windows allows spaces in file names but some web browsers do not.)


188
5. Click "Save" to save your graphic to disk

And that's it. You created a graphic ready for use on your web page.


190
That's it!

You've finished this first tutorial - well done.

Move onto the second tutorial

Go back to the list of tutorials

Quit these tutorials


3D headings, Bevels, Shadows & Textures

This is the second tutorial. If you haven't used Webstyle before, you might find it useful to run the first tutorial before trying this one. Run the first tutorial.

This tutorial uses a 3D heading to take you through the process of changing the shadow, bevel, and texture of a graphic.

Start this tutorial


First load a suitable graphic

The first tutorial described selecting a graphic so we'll just give basic details.

1. Click "Start"

2.	Click on "3D Headings"

This displays a selection of headings.

3. Click on one of the headings to select it.

Choose a heading that is angled (that is, not face on).


230 Shadow
Add a shadow

Shadows can give even simple graphics a feeling of being above the page.

Details on next page...


231
1. Click the "Shadow" button

This shows you the standard shadow options.

2. Click an option you like

As usual, if the result isn't quite right you can just select another option.


233
None of these shadows what you want?

Click Advanced for extra controls over the blur, transparency and shadow position. That's beyond the scope of this tutorial though.


250 Bevel
Change the Bevel

Bevels increase the 3D effect. Bevel (on the button strip to the left) is undimmed for graphics that can have a bevel. (All 3D headings can have a bevel.)

Continued on next page...


251
1. Click the "Bevel" button

This shows you the bevel options for 3D headings. (Other types of graphic have different bevel options.)

2. Increase the Extrusion Depth

Drag the slider to the right: this make the sides of the heading deeper.


252
3.	Change the Bevel Depth

For 3D headings the bevel is the join between the face and the sides. Increasing the depth makes it easier to see the effect of the next step.

4.	Change the Bevel Type

This changes the design of the bevel. Try several options. None removes the bevel and you get a simple right-angled join between the face and the sides.


260 Texture
Using Textures

You can use a texture as a background for any type of graphic (except Backgrounds). Using the same background in Webstyle as you use on your web page allows the graphics to merge perfectly into the final web page.

Some designs might also have textures on the foreground, if that is how the designer has created them.  Using bitmap textures instead of flat color can make your graphics more eye-catching.

Details on next page...


261
1.	Click the "Texture" button

For this part of the tutorial you need a graphic that uses a texture on its face. If the list of Textures just shows Background, select another graphic. (Several graphics have obvious textures on them - choose one of these.)

The Texture list:

Background textures are used behind the graphic and let the saved graphic blend perfectly into your web page.

Other textures are used on the face of the graphic.


262
2.	Click on "Background" to select it

First we'll quickly show you how to use Background textures. You have a limited range of options for background textures because you want the background to be identical to that used on your web page.

3.	Open one of the folders

We've grouped the textures by style into several folders. Just double-click a folder to open it.

4.	Click a texture thumbnail

(Don't click Plain.)

This applies the texture as a background to the graphic.

5.	Click "Plain"

This restores the original, plain background.


263
5.	Click one of the other Texture names in the list

Next step is to modify the other textures (we call these "foreground textures".) The other textures have names such as "Face", "Foreground", or "Texture".

6.	Change the texture used

Just click a thumbnail to select that texture.


264
Want to restore the original texture?

Click the texture marked Original - this restores the texture used by the designer of the graphic.

Want to use flat color?

Click the texture marked Plain. This replaces the texture with flat color. Use the Color page to change the color.


290 Save
Save

The first tutorial covered saving. Click here to see those pages again

You've now finished the second tutorial.

Move onto the third tutorial

Go back to the list of tutorials

Quit these tutorials


300 Third tutorial
Third tutorial - Styles

This is the third tutorial. If you haven't used Webstyle before, you might find it useful to run the first tutorial before trying this one. Run the first tutorial.

This tutorial takes through using a Style to change a graphic. What are Styles?

Start this tutorial


310 Load
First choose a suitable graphic

This is the graphic you want to copy settings from. Using a graphic as a Style doesn't change that graphic.

1. Click "Start"

2.	Click on "Headings"

This displays a selection of headings.


320 Theme
3.	Decide which graphic to use

You can use any graphic as a Style. However, for this tutorial, choose one that uses two or more colors.

4.	Give it a shadow

The previous tutorial described adding a shadow.


323
Store the Style information

1.	Right-click on the graphic

Click on the preview in the Gallery (the lower part of the Webstyle window.)

This pops-up a menu:

2.	Click "Create Style" on the menu

This doesn't change the display. You select later which settings in the Style you want to use.


325
Select another heading

This is the graphic we will update from the Style. Choose any of the headings (other than the one you are using as the Style, of course.)


330 Shadow
Change the shadow

In this step we use the shadow associated with the Style. Shadow is the easiest type of Style property, which is why we'll start with it.

1.	Click the "Shadow" button

This swaps to the Shadows page.

2.	Apply a Shadow

Click one of the Shadow options.

3.	Click the Style button

   Show me the Style button

This pops-up a menu with one option on it.

4.	Select Shadow from the menu

This applies the same shadow (if any) as the Style has. Easy isn't it?


340 Text
Change the text

Next we use the Style for something a little more complicated, changing the text.

1.	Click the "Text" button

This swaps to the Text page.

2.	Click the Style button at the bottom of the page

This pops-up a menu. This time there's two options on the menu; Font & Text.


341
3.	Select Text from the menu

This applies the same text as the Style has.

You can also select Font to copy the font, aspect ratio and so on from the Style.


360 Colors
Change the colors

You can use any of the colors from the Style to change your graphic.

1.	Click the "Color" button

This swaps to the Colors page.

2.	In the list of colors click one of the text colors

So you know which parts of the graphic use this color, click one of the color panels to change the color.


361
3.	Click the Style button at the bottom of the page

This pops-up a menu with several options on it.

You can use any color from the Style to change any color in the graphic. To show you how this works....

4.	On the menu click a color

Parts of the graphic change to that color.

If you wanted to, you could use other colors from the Style to change other colors in the graphic.


390
End of this tutorial

You've now finished the third tutorial.

Move onto the fourth tutorial

Go back to the list of tutorials

Quit these tutorials


400 Fourth Tutorial
Fourth tutorial - NavBars

This is the fourth tutorial. If you haven't used Webstyle before, you might find it useful to run the first tutorial before trying this one. Run the first tutorial.

This tutorial is more complicated than the first three. It covers creating an example navigation bar (NavBar) with multistate buttons. These are often used on web pages for navigation. To make use of NavBars requires a basic knowledge of the HTML language. Also you need an Internet browser to preview the results.

Start this tutorial


410 Select
Select the basic design of NavBar

First step is to select which design you want to use on your Bar. Previous tutorials described selecting graphics. Choose a design from NavBars on the Start page. (You can also choose from the designs on the Buttons page.)


420 Create
The NavBar settings

1.	Click the "NavBars" button

This displays the NavBar options.

The following steps do not apply if you chose a design from NavBars These automatically set Create NavBars. Go to the next page.

But if you want to create a NavBar from a single button design:

2.	Select "Create NavBars"

This tells Webstyle you want to create a multibutton NavBar instead of a single button. It also pops-up a menu.

3. Select "Horizontal" or "Vertical"

You can arrange the buttons horizontally or vertically depending on where on your web page you want to put the NavBar.

Webstyle now creates a NavBar with four buttons with default wording. It also creates the Mouse Off and Mouse Over states.


425 Change message
Change the button messages

Each line of text creates a separate button.

1.	Click on "Home" in the list of buttons

This selects that button.

2.	Change the wording

(for example to Home Page.)

The display immediately updates to show the new text.

You can change the messages on the other buttons in the same way


426
Adding and removing buttons

Webstyle shows a NavBar with four buttons. You may want more or fewer buttons.

To add a button:

Click on [New Button Text Here]. Then type in the wording you want on the new button.

To remove a button:

In the list of buttons, click on the button you want to delete. This highlights the button in the list. Then press the Delete or Backspace key on the keyboard.


427 ALT
Add Alternative text

Browsers shows Alternative text when either

you move the mouse over the button

or you have told the browser not to display graphics.

Adding Alternative text to each button helps the user.

1.	Click on a button in the list of buttons

This selects that button.

2.	Type in the Alternative text

Use Alternative Button Text.

HTML limits you to one line messages.


428 Reorder
Reordering buttons

You can change the order of the buttons in the NavBar. For example to move Downloads towards the top of the list:

1.	Click on "Downloads" in the list of buttons

This selects it.

2.	Drag the highlighted name up the list of buttons

A line shows you where the button will move to. When in the right position, release the mouse button.

You now see the button moved to its new position in the NavBar.

You can move buttons down the list in the same way.


430 Add URL
Adding web addresses

When users click the buttons in your NavBar, they expect something to happen, usually by jumping to another web page. To create the jump, you need to add a web address (or URL) to the button.

We suggest reading Notes on web addresses for more information on the format of web addresses.

1.	Click on the name of the button you want to add a web address to

This selects it.

2.	Type the web address into the "Button URL" box

(It doesn't matter which button state you are viewing - the same address applies to all states.)

You can add web addresses to the other buttons in the same way.

The page you jump to can open in a different window. Target controls this - this is beyond the scope of this tutorial. (If you want more information, see this page.)


440 States
NavBar States

You can create NavBars with up to three states. Overview on NavBar states.

The check boxes to the left of the state names show which states are included (checked) or excluded (unchecked). Webstyle, by default, includes the Mouse Off and Mouse Over states. You cannot exclude the Mouse Off state.

1.	Select all three states

When you preview the NavBar later in this tutorial you can then see when each state is used.

2.	Click on Mouse Off

This displays the Mouse Off button state. We use this later.

This completes your NavBar. The next major step is previewing your NavBar but first some points to note....


442
NavBar colors

1.	Click the Color button on the Button Strip

The Color list now shows all the colors used in the NavBar. Some colors are used only in one state - these are, for example, Text (Mouse Over). (Some NavBars use the same colors on all three states and you don't see any (Mouse Over) or (Selected) colors listed.)

Continued...


443
2.	Change some of the colors

Want to see what the effect of changing the colors is? In the previous step you selected Mouse Off as the state to view. To see Mouse Over move the mouse over a NavBar button in the Preview Window. To see Selected click on a NavBar button.


444 Other options
Other options

These are some notes about other changes you can make to NavBar buttons.

Text

Any changes to wording or font apply to all states.

Bevel

Any changes apply to all buttons and all states.

Shadow

NavBars cannot have shadows.

Size

Any changes apply to all buttons.


460 Preview
Preview the results

Now the fun part, where we preview the results in your Internet browser.

1.	Click the "Save" button on the button strip

2.	Click "Browser Preview"

Webstyle now creates all the different buttons. You can see the variations flash up in the Webstyle window as they are created.

When Webstyle finishes, you see the NavBar displayed in your browser.

More on the next page...


461
The browser preview

You'll probably need to move this tutorial window so you can see the NavBar.

Initially the browser shows you Index page 1.

The left-hand button (or top button for a vertical Bar) is different to the others. This is because it is Selected (one of the NavBar states.) The others show the default Mouse Off state. (Some older browsers do not support JavaScript so your browser might not show these different states.)

Move the mouse pointer over one of the other buttons and you see the Mouse Over state.

Click any of the buttons. This takes you to the web address you typed in for this button (Another Index page if you didn't type in a web address.)


470 Export
When you are satisfied...

When you are happy with the results the final stage is to Export the buttons and the Index pages to disk. You can then copy the buttons to your web site. The Index pages contain JavaScript and HTML code which you can copy to your own web pages. Click Tell me more for full details of which parts of the Index pages you need to copy and where to copy them to. You need a basic knowledge of HTML. The good news is you don't need to understand anything about JavaScript.


490
End of this tutorial

You've now finished the fourth tutorial.

Move onto the next tutorial

Go back to the list of tutorials

Quit these tutorials


Fifth tutorial - Projects

This is the fifth tutorial. If you haven't used Webstyle before, you might find it useful to run the first tutorial before trying this one. Run the first tutorial.

This tutorial shows you how to use Projects to quickly modify several graphics in one operation.

Start this tutorial


What are Projects?

Projects let you edit several graphics by changing one graphic and then applying those changes to the other graphics. This makes them a great time saver.

When you save a graphic you can select which Project to save it to. This lets you, for example, group all the graphics for a particular set of web pages together in one Project. If you want to update those graphics, you can update the Project knowing that no other graphics will be affected.


Creating a project

All saved graphics belong to a Project, which is the default Project if you don't specify your own. This section shows you how to create your own Projects and update graphics in a Project.

1.	Create a graphic

Select a button or heading (your choice). You do not need to edit it but you can if you wish to make it distinctive.

2.	Click the "Save" button

3.	Click "Save graphic"

This opens the second Save page.


4.	Type in the new filename

This can be any name you like (say Graphic1)

5.	Create a new Project

At the bottom left of this page is Project. Initially this shows Default, the default project name.

Type in a new Project name, for example MyProject.

6.	Click "Save"

This saves the graphic as usual but also makes it part of your new Project.

Notice that the Title Bar (at the top of the Webstyle window) now shows MyProject.


Create more graphics

To show you how Projects work we need some more graphics. We suggest modifying the color of the existing graphic and saving this as a second graphic. This makes the action of Projects more obvious in later steps in this tutorial.

Create and save at least four more graphics. They can be any type (buttons, headings, dividers etc.)


Modifying the Project

You now have several graphics in your Project. The next step in this tutorial is to modify these graphics. You are doing this immediately after creating the graphics but normally you might not modify them for weeks or months afterwards. Or you might never modify them. That's the benefit of Projects - you may never use them, but if you do they save you heaps of time.


1.	Click "Projects" on the Button Strip

The left-hand panel shows the list of Project folders and graphics you can use. You see two folders, both marked P telling you they are Project folders.

The right-hand panel, the Selected graphics list, (initially empty) shows the graphics you want to edit.

2.	Click "MyProject"

This step isn't essential but it lets you view the contents of the Projects folder. It makes the next step easier for you to understand.


3.	Click the "Selection" button

This displays a menu: a list of Projects and Clear All.

4.	Choose "MyProject" from the menu

This loads all the graphics in MyProject into the right-hand panel, the Selected graphics list.


Just want to change selected graphics?

If you don't want to change all the graphics in a Project, you can select individual graphics by clicking them in the left-hand panel.

Don't want to edit all the graphics in the Selected Graphics list?

Right-click on a graphic and choose Unselect.

Alternatively, after making the changes, you can choose which graphics to save. (Described later.)


Which graphic do you want to edit?

Remember you change Projects by editing one of the graphics. We call this graphic the Representative. The Representative is the top graphic in the Selected Graphics list.

To select a different graphic as the Representative, just click it in the Selected Graphics list.


1.	Edit the Representative

Make what changes you wish. We suggest changing colors, adding a background texture, and adding a shadow.


Update the rest of the Project

When you have finished editing the Representative, you can apply those changes to the rest of the Project.

1.	On the Projects page click "Apply changes"

This displays a Save box. For fast updating you can click Save All. However for this tutorial, we suggest clicking Save to save each graphic individually. This lets you see how the changes affect each graphic.

Only identical items that have changed are updated. For example, suppose the Representative has a color called Color1 (which is blue). You edit Color1 and make it red.

A second graphic also uses Color1 (also blue). Color1 gets changed to red because it has the same name and color.

A third graphic also uses Color1 but this is green. This doesn't change as, although the name is the same, the color is different.

For a complete list of changes see this page.


600 Reloading
Fifth tutorial - reloading your work

This is the fourth tutorial. If you haven't used Webstyle before, you might find it useful to run the first tutorial before trying this one. Run the first tutorial.

This tutorial describes how to reload work you have already created.

Start this tutorial


610
1. Click Start on the button bar

This displays the starting page in Webstyle.

Below the Start button are the Load and Import buttons.

Both these let you create work you have already created but do it in different ways. First we need to explain what happens when you save a file...


615
When you save a file...

You choose whether to save the graphic as a GIF or JPEG (or, using the Advanced save options, as a PNG) file. This is the file that gets used on your web page. You choose where you want to store this file. (Into the Export folder if you use the default option.)

Webstyle cannot edit GIF/JPEG/PNG format files so it also stores a second file in its own XWS format. If you need to edit the graphic in the future, Webstyle can reload the XWS file and start editing. Webstyle saves the XWS files in the Project folders. When you first run Webstyle it creates a Project for you called Default. You can create your own Projects so you can keep related files together and so easy to find. There's more on creating Projects later in this tutorial.


620
The Load button

This displays your Project folders.

1.	Click the Load button

This displays only one folder, called Default. (Because you haven't created any new Projects yet.)

2.	Click on the folder

This opens it and displays all the graphics you have created so far. These are the XWS format files.

If you wanted to edit any of them, you could just click on its preview.

Next for this tutorial, we want to explain the Import button.


630
The Import button

We've explained what the Load button does. Now to explain the Import button:

1.	Click Start

This displays the Load and Import buttons.

2.	Click Import

This also displays the graphics you have created. What you are seeing are the GIF/JPEG/PNG files.


635
3.	Double-click one of the previews

As described earlier, Webstyle cannot edit GIF/JPEG/PNG files so it finds the XWS source file and loads that.

What if I try and import a GIF/JPEG/PNG not created by Webstyle?

There's no XWS file to load and so Webstyle cannot edit the graphic.

What if I rename a GIF/JPEG/PNG file after creating it in Webstyle?

Webstyle does a "smart search" to find the original XWS file. Usually this works. If Webstyle cannot find the XWS file, try looking in the Project folders.


640
Edit the graphic

For example by changing the colors so you can identify this new graphic.


650
Save the graphic

What we are going to do is create a new Project folder.

1.	Click Save on the button strip

2.	Click "New Project"

This lets you type in the name of your new Project.

3.	Type in a Project name

For example My Project (or another name if you prefer).

4.	Click OK

This creates your Project

Previous tutorials covered the other settings on this page so we can ignore them

5.	Click "Save Graphic"

This moves onto the second page.


655
The second Save page

This is where you specify the folder to save the GIF/JPEG file to. At the top you can see that the current save folder is Default. If you wish you can change this.

1.	Click "Save"

This saves the GIF/JPEG file.


690
Look at the Projects again

1. Click Start

2.	Click Load

This time you have two projects folders: Default and your new Project.

3.	Click on your new Project

This opens it and displays the file you just created.


999
That's it!

You've completed these tutorials.

Go back to the list of tutorials

We hope you found these tutorials helpful


C - First Screen (Topic 901)
Welcome to Webstyle

Webstyle lets you create stunning, professional quality web graphics in a matter of minutes.

The basics of using Webstyle:

You can create none different types of graphic: 2D headings, 3D headings, bullets, text buttons, page backgrounds, NavBars, Logos. Banner Ads and page dividers.

The other option is Theme Sets which are sets of different types of graphic, all designed around a common style.

To create you own graphics:

Select the type of graphic you want to create (click Start) - this displays a wide range of templates to choose from.

Use the buttons down the left hand side of the window for options to customize the graphic

Finally select Save to preview and save the graphic for use on your web page.

For more information, there are prompts at the top of the window or click the Tell me more button.

However the quickest way to get to know Webstyle is run the Tutorials. (They only take a few minutes.)


Contents
Tutorial

These simple tutorials show you the basics of Xara Webstyle. You can work through them at your own pace but they shouldn't take more than a few minutes.

Click one of the buttons to move to the next page:

First tutorial - creating a button and changing its text and color

Second tutorial - 3D headings, Bevels, Shadows & Textures

Third tutorial - using Styles

Fourth tutorial - creating NavBars

Fifth tutorial - reloading your work

There is also an introductory walk-through on our web site [image] showing the current version of Webstyle

For more information on using Webstyle, there are prompts at the top of the window or click the Tell me more button for help relating to that page.

This tutorial is © Xara Ltd. 2002 (v2.01cm)


I don't want to run this Tutorial right now

You can run it another time by clicking Tutorials when you start Webstyle.


Exit

This page is used only as an Exit to ensure all windows get closed. Users should never see it.


Internet browser
The most common Internet browsers are Netscape Navigator and Microsoft Internet Explorer. Note that older versions of these and some other browsers do not support JavaScript, needed to display the rollovers.


Specifying a Target

If you want the web address to display in a specific frame in the browser, you can specify the "target" frame.

For example, if you type 'http://xara.com' into the URL field and 'RIGHT' into the Frame field, then this tells the browser to display the page 'http://xara.com' in the frame called 'RIGHT'.

The drop-down list contains four frame names that cause the browser to do special things:

_self	Fetch the specified web page into this frame. (The frame that contains this object.) This is the best option to use if you are not sure which to use.

_parent	Fetch the specified web page into the parent window or frameset that contains this frame.

_top	Fetch the web page into the main browser window, replacing any existing frames.

_blank	Fetch the web page into a new window.

none	Do not include a TARGET attribute in the image map entry for this object. This has the same effect as _self unless you have used a BASE TARGET= tag in the HTML document.

You can either select one of these, or type in the name of another frame.


Web addresses
Browsers such as Netscape Navigator and Internet Explorer interpret web addresses as:

If the address starts http:// then it refers to a web site (for example "http://www.xara.com").

Other addresses are taken as relative to the current page. For example, index.htm is a page on the current web site.

You can also use addresses such as mailto:sales@xara.com to send email.

Webstyle automatically adds the http:// to:

addresses that start www. (such as www.buyfonts.com)

addresses that have two or more groups of characters separated by dots (such as news.bbc.co.uk)

For other web site addresses (such as xara.com), you need to add http:// to the start of the address. Otherwise the browser interprets it as relative (an address on the current web site). Please note that this is a function of the browser and outside the control of Webstyle.


What are Themes?
What are Styles?

Suppose you will create your web site over several weeks. You don't currently know what headings you need but you know you want them all to be the same color, size, and font.

You could remember each of these settings and apply them next time.

An easier way is to create a sample heading. From this, you can copy the attributes - text,colors, size, shadow, bevel - to the other graphics.

To understand how to save a style and apply it to a other graphics just read through the rest of this tutorial.


graphic
What's a graphic?

We use 'graphic' as an all purpose name for what you produce in Webstyle. You can think of 'graphics' as drawings, illustrations, images or any other name you like.